<template>
  <div>{{ msg }}</div>
  <!-- 可读性差 -->
  <div>{{ msg.split(' ').reverse().join(',') }}</div>
  <hr>
  <div>{{ reverseMsg }}</div>
  <div>{{ reverseMsg }}</div>
  <div>{{ reverseMsg }}</div>
  <div>reverseMsgMethod==>{{ reverseMsgMethod() }}</div>
  <div>reverseMsgMethod==>{{ reverseMsgMethod() }}</div>
  <div>reverseMsgMethod==>{{ reverseMsgMethod() }}</div>
  <button @click="msg='ni hao'">change msg</button>
  <hr>
  <div>{{ fullName }}</div>
  <button @click="changeFullName">change fullName</button>
</template>
<script setup>
  import { ref,computed } from 'vue';
  const msg = ref('hello vue3')
  // 做计算用的
  // computed 返回的是一个只读的 ref
  const reverseMsg = computed(()=>{
    console.log("couputed.....");
    return msg.value.split(' ').reverse().join(',')
  })

  // 方法没有缓存，计算属性有缓存的,只有计算属性所依赖的响应式数据发生该表，会重新计算
  const reverseMsgMethod = ()=>{
    console.log("method....");
    return msg.value.split(' ').reverse().join(',')
  } 


  let fristName = ref('jack')
  let lastName = ref('Smith')

  // 完整的 计算属性 是可以可读可写的 ref
  const fullName = computed({
    get(){
      return fristName.value + " "+ lastName.value
    },
    set(val){
      // fristName.value = val.split(" ")[0]
      // lastName.value = val.split(" ")[1]

      [fristName.value, lastName.value] = val.split(' ')
    }
  })

  const changeFullName = ()=>{
    fullName.value = "Maik M"
  }

  // 不要在 getter 中做异步请求或者更改 DOM！

</script>